<template>
	<div class="cate-tab2">
		<div class="tab2-title">
			<ol>
				<li>
					<router-link to="/" >
						<article class="first-t">
							<h3>{{tab2List[0].city}}</h3>
							<img :src="tab2List[0].imgURL">
							<p>{{tab2List[0].title}}——{{tab2List[0].msg}}<em>￥{{tab2List[0].price}}</em></p>
						</article>
					</router-link>
				</li>
			</ol>
		<div class="tab2-head swiper">
			<ol class="swiper-wrapper" >
				<template v-for="item in tab2List" >
					<li :key="item.id" v-if="item.id > 1" class="swiper-slide" >
						<router-link to="/" >
							<article>
								<h3>{{item.city}}</h3>
								<img :src="item.imgURL">
								<p>{{item.title}}</p>
								<p>{{item.msg}}</p>
								<em>￥{{item.price}}</em>
							</article>
						</router-link>
					</li>
				</template>
			</ol>
		</div>
		</div>
		<p class="btn"><button>加载更多<i class="iconfont" >&#xe622;</i></button></p>
	</div>
</template>

<script>
	import {
		onMounted
	} from 'vue';
	// 2.引入Swiper的动态组件
	import Swiper, {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	// 3.swiper组件应用配置
	Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination]);
	export default{
		name : 'CategoryTab2',
		props : {
			propscategoryTab2_son : {
				type : Object,
				default :function(){
					return {}
				}
			}
		},
		data(){
			return {
				tab2List : [],
			}
		},
		created(){
			this.tab2List = this.propscategoryTab2_son;
		},
		setup(){
			onMounted( ()=>{
				new Swiper( '.tab2-head' , {
					slidesPerView : 3,
					// slidesPerGroup : 3,
		
				} )
			} )
		},
	}
</script>
<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	.cate-tab2{
		height: 9.5rem;
	}
	.cate-tab2 button{
		width: 90%;
		height: 1rem;
		border-radius: 0.2rem;
		border: 0;
		font-size: 0.35rem;
	}
	.cate-tab2 .btn{
		text-align: center;
	}
	.cate-tab2 .tab2-title ol li{
		/* width: 100%;
		height: 100%; */
	}
	.cate-tab2 .tab2-title ol li:first-child img{
		width: 100%;
		height: 50%;
		background-size: 100% 100%;
		border-radius: 0.3rem;
	}
	.cate-tab2 .tab2-title ol li:first-child .first-t{
		position: relative;
	}
	.cate-tab2 .tab2-title ol li:first-child .first-t p{
		background-color: rgba(10, 49, 24, 0.7);
		color: white;
		width: 100%;
		line-height: 0.6rem;
		font-size: 0.35rem;
		position: absolute;
		bottom: 0;
	}
	.cate-tab2 .tab2-title ol li:first-child .first-t p em{
		line-height: 0.5rem;
		font-size: 0.35rem;
		float: right;
		margin-right: 0.5rem;
		color: orange;
	}
	.cate-tab2 .tab2-title ol li:first-child .first-t h3{
		position: absolute;
		top: 0;
		color: white;
		font-size: 0.3rem;
		line-height: 0.6rem;
		width: 18%;
		border-radius: 0 0 0.3rem 0;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.7);
	}
	.cate-tab2 .tab2-title .tab2-head ol li a{
		float: left;
		width: 100%;
		color: black;
		margin-top: 0.3rem;
	}
	.cate-tab2 .tab2-title .tab2-head ol li img{
		width: 90%;
		height: 100%;
		background-size: 100% 100%;
		border-radius: 0.3rem;
	}
	.cate-tab2 .tab2-title .tab2-head ol li h3{
		position: absolute;
		color: white;
		font-size: 0.2rem;
		line-height: 0.6rem;
		padding-left: 0%;
		padding-right: 10%;
		/* width: 50%; */
		border-radius: 0 0 0.3rem 0;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.7);
	}
	.cate-tab2 .tab2-title .tab2-head ol li p:nth-child(3){
		font-size: 0.35rem;
		line-height: 0.5rem;
		font-weight: bold;
	}
	.cate-tab2 .tab2-title .tab2-head ol li p:nth-child(4){
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		color: #909090;
		line-height: 0.5rem;
	}
	.cate-tab2 .tab2-title .tab2-head ol li em{
		margin-left: 0.2rem;
		line-height: 0.7rem;
		font-size: 0.35rem;
		color: orange;
	}
</style>
